/* 标签组件样式 - 优化为使用CSS变量 */
@use "../base/variables" as *;

/* ===== 统一的状态标签样式 ===== */
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: $border-radius-md;
  font-size: $font-size-xs;
  font-weight: $font-weight-semibold;
  min-width: 60px;
  text-align: center;
  border: 1px solid;
  transition: all $transition-fast;
  white-space: nowrap;

  /* 难度标签样式 */
  &.status-easy {
    background-color: var(--color-success-lighter);
    color: var(--color-success);
    border-color: var(--color-success);
  }

  &.status-medium {
    background-color: var(--color-warning-lighter);
    color: var(--color-warning);
    border-color: var(--color-warning);
  }

  &.status-hard {
    background-color: var(--color-danger-lighter);
    color: var(--color-danger);
    border-color: var(--color-danger);
  }

  /* 状态标签样式 */
  &.status-active {
    background-color: var(--color-info-lighter);
    color: var(--color-info);
    border-color: var(--color-info);
  }

  &.status-archived {
    background-color: var(--color-bg-disabled);
    color: var(--color-text-quaternary);
    border-color: var(--color-border-secondary);
  }

  &.status-draft {
    background-color: var(--color-warning-lighter);
    color: var(--color-warning);
    border-color: var(--color-warning);
  }

  /* 可见性标签样式 */
  &.visibility-public {
    background-color: var(--color-success-lighter);
    color: var(--color-success);
    border-color: var(--color-success);
  }

  &.visibility-private {
    background-color: var(--color-warning-lighter);
    color: var(--color-warning);
    border-color: var(--color-warning);
  }

  /* 悬停效果 */
  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}

/* ===== 分类标签样式 ===== */
.category-tag {
  &.el-tag {
    border-color: var(--color-info-lighter);
    color: var(--color-info);
    background-color: var(--color-info-lighter);
    font-weight: $font-weight-medium;
    border-radius: $border-radius-base;
    
    &:hover {
      border-color: var(--color-info);
      background-color: rgba(var(--color-info), 0.1);
    }
  }
}

/* 难度标签颜色 - 使用Element Plus的tag组件 */
.difficulty-tag {
  &.el-tag--success {
    background-color: var(--color-success-lighter);
    border-color: var(--color-success);
    color: var(--color-success);
  }

  &.el-tag--warning {
    background-color: var(--color-warning-lighter);
    border-color: var(--color-warning);
    color: var(--color-warning);
  }

  &.el-tag--danger {
    background-color: var(--color-danger-lighter);
    border-color: var(--color-danger);
    color: var(--color-danger);
  }
}
